<template>
  <div class="border-bottom">
    <van-card :thumb="getImagePath(order.shopImg)" thumb-link="">
      <template #title>
        <van-row type="flex">
          <van-col span="6"  style="font-size: 17px;"><B>{{ order.shopName }}</B></van-col>
          <van-col span="8"></van-col>
          <van-col span="10" style="font-size: 15px;">{{ order.orderStatusDetails }}</van-col> 
        </van-row>
        <br />
        <!-- 分割线 -->
        <van-divider />
        <!-- <van-divider></van-divider> -->
      </template>
      
      <template #desc>
        <van-row  v-for="(o,index) in orderDetails" :key="index">
          <van-col span="6" class="span">{{o.itemName}}</van-col>
          <van-col span="8"></van-col>
          <van-col span="10" class="span">X{{o.itemNum}}</van-col> 
        </van-row>
        <br/>
      </template>
      <template #bottom>
        <van-row>
          <van-col span="14" offset="4" class="span">共{{orderDetails.length}}件商品实付：</van-col>
          <van-col span="1" class="span">￥{{ order.totalPrice }}</van-col> </van-row
        ><br />
      </template>
      <template #footer>
        <van-button color="#FFDD01">
          <span class="button-test">去评论</span>
        </van-button>
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  name: "Order",
  props:['order'],
  data() {
    return {
       orderDetails:JSON.parse(this.order.orderDetails), // 订单详细
       baseUrl: 'http://localhost:8081/images/shop/',
    }
  },
  methods:{
    //拼接地址
    getImagePath(imgName){
        return `${this.baseUrl}${imgName}`;
    },
  },
  mounted(){
  }
};
</script>

<style scoped>
.button-test{
  color: black;
}
.border-bottom{
  border-bottom: 1px solid rgb(194, 193, 193);
}
.span{
  
    font-size: 15px;
    color: #000000;
}
</style>
